<template>
  <div class="activity-reserve pd-20">
    <el-input v-model="search.name"
              placeholder="请输入活动名称"
              class="w-200"
              clearable
              @clear="handleQuery"></el-input>
    <el-select v-model="search.status"
               placeholder="请选择预约状态"
               clearable
               @change="handleQuery">
      <el-option v-for="item in statusList"
                 :key="item.value"
                 :label="item.label"
                 :value="item.value">
      </el-option>
    </el-select>
    <el-button type="primary"
               @click="handleQuery">查 询</el-button>
    <el-button type="primary"
               @click="handleOption('add', null)">新 增</el-button>
    <element-table class="mt-20"
                   :columns="columns"
                   :data="tableData"
                   v-loading="loading"
                   pager
                   :pageTotal="pageTotal"
                   :pageIndex="pageIndex"
                   :pageSize="pageSize"
                   @handleChangePage="handleChangePage">
      <template v-slot:activityBeforeAppointmentCompanyDtos="{row}">
        <div v-for="item in row.activityBeforeAppointmentCompanyDtos"
             :key="item.id"
             style="margin-bottom:5px;">
          <el-tag type="primary">{{item.companyName}}</el-tag>
        </div>
      </template>
      <template v-slot:status="{row}">
        <el-tag type="success"
                v-if="row.status === 0">全部</el-tag>
        <el-tag type="danger"
                v-if="row.status === 1">预约中</el-tag>
        <el-tag type="info"
                v-if="row.status === 2">已截止</el-tag>
      </template>
      <template v-slot:option="{row}">
        <el-button type="primary"
                   @click="handleOption('edit', row)">编 辑</el-button>
        <el-button type="danger"
                   @click="handleOption('del', row)">删 除</el-button>
        <el-button type="info"
                   @click="handleOption('detail', row)">查看预约明细</el-button>
        <el-button type="warning"
                   @click="handleOption('diseases', row)">关联病症</el-button>
      </template>
    </element-table>
    <reserve-dialog :dataObj="dataObj"
                    v-if="reserveDialog"
                    :visible.sync="reserveDialog"></reserve-dialog>
  </div>
</template>
<script>
  import ElementTable from '@/base/ElementTable'
  import reserveDialog from './reserveDialog'
  export default {
    name: 'activityReserve', // 活动预约发布
    data () {
      return {
        loading: false,
        reserveDialog: false,
        search: {
          name: '',
          status: 0
        },
        statusList: [
          { value: 0, label: '全部' },
          { value: 1, label: '预约中' },
          { value: 2, label: '已截止' }
        ],
        tableData: [],
        columns: [
          {
            label: '活动名称',
            prop: 'name',
            width: 180,
          }, {
            label: '参与公司',
            prop: 'activityBeforeAppointmentCompanyDtos',
            align: 'center',
            isSlot: true
          }, {
            label: '预约发布日期',
            prop: 'createTime',
            align: 'center',
            width: 150,
            formatter: (row, cellValue) => {
              return this.commonFunction.timestampFormat(new Date(row.createTime), 'yyyy-MM-dd hh:mm:ss')
            }
          }, {
            label: '预约截止日期',
            prop: 'expirationDate',
            align: 'center',
            width: 150,
            formatter: (row, cellValue) => {
              return this.commonFunction.timestampFormat(new Date(row.expirationDate), 'yyyy-MM-dd')
            }
          }, {
            label: '预约状态',
            prop: 'status',
            align: 'center',
            isSlot: true
          }, {
            label: '预约费用（¥）',
            prop: 'appointmentAward',
            align: 'center',
            formatter: (row, cellValue) => {
              return row.appointmentAward + '元/人';
            }
          }, {
            label: '操作',
            prop: 'option',
            align: 'center',
            isSlot: true,
            width: 380
          }
        ],
        pageTotal: 0,
        pageIndex: 1,
        pageSize: 20,
        dataObj: {}
      }
    },
    methods: {
      handleQuery() {
        this.pageIndex=1
        this.getList()
      },
      async getList () {
        this.loading = true;
        const { data: res } = await this.post(this.api.promote.getAppointmentPage, {
          pageIndex: this.pageIndex - 1,
          pageSize: this.pageSize,
          ...this.search
        });
        if (res.code === '200') {
          this.loading = false;
          this.tableData = res.object;
          this.pageTotal = res.totalNum;
        }
      },
      // 分页
      handleChangePage (page) {
        this.pageIndex = page;
        this.getList();
      },
      async handleOption (op, row) {
        switch (op) {

          case 'add':
            this.dataObj = null;
            this.reserveDialog = true;
            break;
          case 'edit':
            this.dataObj = Object.assign({}, row);
            this.reserveDialog = true;
            break;
          case 'diseases':
            this.$router.push({ name: 'diseasesList', query: { id: row.id } });
            break;
          case 'del':
            this.$confirm('确认删除？')
              .then(async _ => {
                const { data: res } = await this.post(this.api.promote.delAppointment, {
                  id: row.id
                })
                if (res.code === '200') {
                  this.$message.success('删除成功!');
                  this.getList();
                }
              })
              .catch(_ => { });
            break;
          case 'detail':
            this.$router.push({ name: 'reserveDetail', query: { routeParams: JSON.stringify(row) } });
            break;
        }
      }
    },
    created () {
      this.getList();
    },
    components: {
      'element-table': ElementTable,
      'reserve-dialog': reserveDialog
    }
  }
</script>
<style scoped lang="scss">
</style>
